<!-- 端午特卖专题--弹窗 -->
<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible1"
      title="端午特卖专题"
     
      :before-close="handleClose"
    >
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="通过审核"
          name="first"
        >
          <div>
            <el-table
              :data="pass"
              style="margin-top: 16px;font-size: 16px;"
              :header-cell-style="{ background: '#EBEEF2' }"
              :row-style="{ height: '80px' }"
            >
              <el-table-column
                prop="productdetail"
                label="商品信息"
                align="center"
              >
                <template slot-scope="scope">
                  <div style="color: skyblue;"> {{ scope.row.productdetail.name }} </div>
                  <div
                    v-for=" ( item ,index ) in scope.row.productdetail.children"
                    :key="index"
                  >
                    <span style="font-size: 12px;color: gainsboro;">{{ item.name }}*{{ item.number }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="shopname"
                label="店铺名称"
                align="center"
              >
                <template slot-scope="scope">
                  <div style="color: skyblue;">{{ scope.row.shopname }}</div>
                </template>
              </el-table-column>
              <el-table-column
                width="200"
                prop="category"
                label="所属分类"
                align="center"
              />
              <el-table-column
                prop="singleprice"
                label="零售价格"
                align="center"
              >
                <div slot-scope="scope">
                  <span v-if="scope.row.singleprice"> ￥{{ scope.row.singleprice }}</span>
                </div>
              </el-table-column>
              <el-table-column
                prop="cheaperprice"
                label="优惠价格"
                align="center"
              >
                <div slot-scope="scope">
                  <span v-if="scope.row.cheaperprice"> ￥{{ scope.row.cheaperprice }}</span>
                </div>
              </el-table-column>
              <el-table-column
                prop="applytime"
                label="审核时间"
                align="center"
              />
              <el-table-column label="操作">
                <template>
                  <div>
                    <span>撤回</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="control">
            <el-pagination
              background
              layout="->,prev, pager,next,total"
              :page-size="3"
              :total="tableDataLength"
              @current-change="handleCurrentChange"
              style="margin-top: 20px;"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="审核中"
          name="second"
        >
          <div>
            <el-table
              :data="apply"
              style="margin-top: 16px;font-size: 16px;"
              :header-cell-style="{ background: '#EBEEF2' }"
              :row-style="{ height: '80px' }"
            >
              <el-table-column
                prop="productdetail"
                label="商品信息"
                align="center"
              >
                <template slot-scope="scope">
                  <div style="color: skyblue;"> {{ scope.row.productdetail.name }} </div>
                  <div
                    v-for=" ( item ,index ) in scope.row.productdetail.children"
                    :key="index"
                  >
                    <span style="font-size: 12px;color: gainsboro;">{{ item.name }}*{{ item.number }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="shopname"
                label="店铺名称"
                align="center"
              >
                <template slot-scope="scope">
                  <div style="color: skyblue;">{{ scope.row.shopname }}</div>
                </template>
              </el-table-column>
              <el-table-column
                width="200"
                prop="category"
                label="所属分类"
                align="center"
              />
              <el-table-column
                prop="singleprice"
                label="零售价格"
                align="center"
              >
                <div slot-scope="scope">
                  <span v-if="scope.row.singleprice"> ￥{{ scope.row.singleprice }}</span>
                </div>
              </el-table-column>
              <el-table-column
                prop="cheaperprice"
                label="优惠价格"
                align="center"
              >
                <div slot-scope="scope">
                  <span v-if="scope.row.cheaperprice"> ￥{{ scope.row.cheaperprice }}</span>
                </div>
              </el-table-column>
              <el-table-column label="操作">
                <template>
                  <div>
                    <span>撤回</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              layout="->,prev, pager,next,total"
              :page-size="3"
              :total="tableDataLength"
              @current-change="handleCurrentChange"
              style="margin-top: 20px;"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="被拒绝"
          name="third"
        >
          <div>
            <el-table
              :data="refuse"
              style="margin-top: 16px;font-size: 16px;"
              :header-cell-style="{ background: '#EBEEF2' }"
              :row-style="{ height: '80px' }"
            >
              <el-table-column
                prop="productdetail"
                label="商品信息"
                align="center"
              >
                <template slot-scope="scope">
                  <div style="color: skyblue;"> {{ scope.row.productdetail.name }} </div>
                  <div
                    v-for=" ( item ,index ) in scope.row.productdetail.children"
                    :key="index"
                  >
                    <span style="font-size: 12px;color: gainsboro;">{{ item.name }}*{{ item.number }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="shopname"
                label="店铺名称"
                align="center"
              >
                <template slot-scope="scope">
                  <div style="color: skyblue;">{{ scope.row.shopname }}</div>
                </template>
              </el-table-column>
              <el-table-column
                width="200"
                prop="category"
                label="所属分类"
                align="center"
              />
              <el-table-column
                prop="singleprice"
                label="零售价格"
                align="center"
              >
                <div slot-scope="scope">
                  <span v-if="scope.row.singleprice"> ￥{{ scope.row.singleprice }}</span>
                </div>
              </el-table-column>
              <el-table-column
                prop="cheaperprice"
                label="优惠价格"
                align="center"
              >
                <div slot-scope="scope">
                  <span v-if="scope.row.cheaperprice"> ￥{{ scope.row.cheaperprice }}</span>
                </div>
              </el-table-column>
              <el-table-column
                prop="applytime"
                label="审核时间"
                align="center"
              />
              <el-table-column
                prop="refuseReson"
                label="拒绝原因"
                align="center"
              />
              <el-table-column label="操作">
                <template>
                  <div>
                    <span>重新申请</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              layout="->,prev, pager,next,total"
              :page-size="3"
              :total="tableDataLength"
              @current-change="handleCurrentChange"
              style="margin-top: 20px;"
            >
            </el-pagination>
          </div>

        </el-tab-pane>
        <el-tab-pane
          label="全部参与商品"
          name="fourth"
        >
          <el-button @click="showaddproduct" class="btn1"><i class="el-icon-plus"></i>商品</el-button>
          <div>
            <el-table
              :data="selectedItems"
              style="margin-top: 16px;font-size: 16px;"
              :header-cell-style="{ background: '#EBEEF2' }"
              :row-style="{ height: '80px' }"
            >
              <el-table-column
                prop="productdetail"
                label="商品信息"
                align="center"
              >
                <template slot-scope="scope">
                  <div style="color: skyblue;"> {{ scope.row.productdetail.name }} </div>
                  <div
                    v-for=" ( item ,index ) in scope.row.productdetail.children"
                    :key="index"
                  >
                    <span style="font-size: 12px;color: gainsboro;">{{ item.name }}*{{ item.number }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="shopname"
                label="店铺名称"
                align="center"
              >
                <template slot-scope="scope">
                  <div style="color: skyblue;">{{ scope.row.shopname }}</div>
                </template>
              </el-table-column>
              <el-table-column
                width="200"
                prop="category"
                label="所属分类"
                align="center"
              />
              <el-table-column
                prop="singleprice"
                label="零售价格"
                align="center"
              >
                <div slot-scope="scope">
                  <span v-if="scope.row.singleprice"> ￥{{ scope.row.singleprice }}</span>
                </div>
              </el-table-column>
              <el-table-column
                prop="cheaperprice"
                label="优惠价格"
                align="center"
              >
                <div slot-scope="scope">
                  <span v-if="scope.row.cheaperprice"> ￥{{ scope.row.cheaperprice }}</span>
                </div>
              </el-table-column>
              <el-table-column
                prop="status"
                label="状态"
                align="center"
              >
                <div slot-scope="scope">
                  <span
                    v-if="scope.row.status === 1"
                    style="color: green;"
                  >通过审核</span>
                  <span
                    v-if="scope.row.status === 0"
                    style="color: blue;"
                  >审核中</span>
                  <span
                    v-if="scope.row.status === 2"
                    style="color: red;"
                  >拒绝</span>
                </div>
              </el-table-column>
              <el-table-column
                prop="applytime"
                label="审核时间"
                align="center"
              />
              <el-table-column label="操作">
                <template>
                  <div>
                    <span>撤回</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
           
          </div>
          <div class="control">
            <el-pagination
              background
              layout="->,prev, pager,next,total"
              :page-size="3"
              :total="tableDataLength"
              @current-change="handleCurrentChange"
              style="margin-top: 20px;"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <AddCommity :addVisible.sync="dialogaddVisible" @dialogclose="closedialogadd" ></AddCommity>
  </div>
</template>

<script>
import AddCommity from './AddCommity.vue';
export default {
  name: "RecommendDailog",
  components: {
    AddCommity,
  },
  props: {
    dialogVisibleshow: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: "",
    },
  },
  watch: {
    dialogVisibleshow: {
      handler(val) {
        this.dialogVisible1 = val;
      },
      immediate: true,
      deep: true,
    },
    name: {
      handler(val) {
        this.activeName = val;
      },
      deep: true,
    },
  },
  created() {
    //this.dialogVisible1 = this.dialogVisible;
    console.log(this.dialogVisible1);
  },
  data() {
    return {
      activeName: this.name,
      tableDataLength:0,
      currentPage: 1,
      pageSize: 3,
      dialogVisible1: this.dialogVisibleshow,
      dialogaddVisible: false,
      selectedItems: [
        {
          productdetail: {
            name: "端午伴手礼",
            children: [
              {
                name: " 礼盒",
                number: 1,
              },
            ],
          },
          shopname: "中国民营百思旗舰店",
          category: "食品/地方特产",
          singleprice: "138",
          cheaperprice: "99",
          status: 1,
          applytime: "2024/50/24",
        },
        {
          productdetail: {
            name: "端午伴手礼",
            children: [
              {
                name: " 礼盒",
                number: 1,
              },
              {
                name: "礼盒",
                number: 1,
              },
            ],
          },
          shopname: "中国民营百思旗舰店",
          category: "食品/地方特产",
          singleprice: "138",
          cheaperprice: "99",
          status: 0,
          applytime: "",
        },
        {
          productdetail: {
            name: "端午伴手礼",
          },
          shopname: "中国民营百思旗舰店",
          category: "食品/地方特产",
          singleprice: "138",
          cheaperprice: "99",
          status: 2,
          applytime: "2024/50/24",
        },
      ],
      pass: [
        {
          productdetail: {
            name: "端午伴手礼",
            children: [
              {
                name: " 礼盒",
                number: 1,
              },
            ],
          },
          shopname: "中国民营百思旗舰店",
          category: "食品/地方特产",
          singleprice: "138",
          cheaperprice: "99",
          applytime: "2024/05/24",
        },
      ],
      apply: [
        {
          productdetail: {
            name: "端午伴手礼",
            children: [
              {
                name: " 礼盒",
                number: 1,
              },
            ],
          },
          shopname: "中国民营百思旗舰店",
          category: "食品/地方特产",
          singleprice: "138",
          cheaperprice: "99",
          applytime: "2024/05/24",
        },
      ],
      refuse: [
        {
          productdetail: {
            name: "端午伴手礼",
            children: [
              {
                name: " 礼盒",
                number: 1,
              },
            ],
          },
          shopname: "中国民营百思旗舰店",
          category: "食品/地方特产",
          singleprice: "138",
          cheaperprice: "99",
          refuseReson: "非节目相关产品",
          applytime: "2024/50/24",
        },
      ],
    };
  },
  methods: {
    showaddproduct(){
        console.log("showaddproduct");
        this.dialogaddVisible=true;
        console.log(this.dialogaddVisible);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose() {
      this.dialogVisible1 = false;
      this.$emit("update:dialogVisibleshow", false);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    closedialogadd(){
        this.dialogaddVisible=false;
    }
  },
};
</script>

<style>
.btn1 {
  /* position: absolute; */
  margin-bottom: 10px;
  float: right;
  right: 180px;
  opacity: 1;
  border-radius: 80px;
  width: 130px;
  height: 38px;
  color: white;
  font-size: 15px;
  background: rgba(126, 114, 242, 1);
}
:deep(.el-tabs__nav-wrap::after) {
  height: 0px !important;
}
.control {
  height: 100px;
  display: flex;
  /* 设置为 flex 容器 */
  flex-direction: column;
  /* 默认情况下是列方向，但为了明确性可以指定 */
  /* justify-content: flex-end; */
  /* 子项在交叉轴（这里是垂直方向）的末尾对齐 */
  align-items: flex-end;
}
</style>